<template>
  <el-row type="flex" justify="center" align="middle">
    <el-card class="login-box">
      <h3 class="title">系统登录</h3>
      <el-form :model="user" :rules="rules" ref="loginForm"  @keyup.enter.native="submit">
        <el-form-item prop="username">
          <el-input v-model="user.username" prefix-icon="el-icon-fa-user-o" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="user.password" prefix-icon="el-icon-fa-lock" placeholder="请输入密码" type="password"/>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="remember">记住密码</el-checkbox>
        </el-form-item>
        <div class="errors">
          <span v-show="errors"><i class="el-icon-warning"></i> {{ errors }}</span>
        </div>
        <el-button type="primary" @click="submit" block class="block-button" :loading="process">登录</el-button>
      </el-form>
    </el-card>
  </el-row>
</template>

<script>
  import { mapActions } from "vuex";
  import { util } from "@/config";
  import { TOKEN } from "@/config/store/mutation-types";

  const storage = window.localStorage;
  const REMEMBER = "remember";
  const USERNAME = "username";
  const PASSWORD = "password";
  export default {
    name: "login",
    data() {
      return {
        remember: false,
        timestamp: 0,
        user: {
          username: storage.getItem(USERNAME) || "",
          password: storage.getItem(PASSWORD) || "",
        },
        process: false,
        errors: "",
        rules: {
          username: {
            required: true,
            message: "请输入用户名"
          },
          password: {
            required: true,
            message: "请输入密码"
          }
        }
      };
    },
    mounted() {
      this.remember = !!storage.getItem(REMEMBER);
    },
    methods: {
      ...mapActions([TOKEN]),
      submit() {
        this.process = true;
        this.$refs.loginForm.validate()
          .then(() => this.login(this.user))
          .then(result => {
            if (!util.isSuccess(result.code)) {
              this.errors = result.msg || "登录失败";
              return Promise.reject(false);
            }
            this.process = false;
            this.rememberPassword(this.user);
            this[TOKEN](result.token);
            this.$router.push("/");
          })
          .catch(() => {
            this.process = false;
          });
      },
      login(params) {
        return new Promise(resolve => {
          console.log(params);
          setTimeout(function () {
            resolve({
              code: 0,
              token: String(new Date().getTime())
            });
          }, 800)
        });
      },
      rememberPassword(user) {
        storage.setItem(REMEMBER, this.remember || "");
        storage.setItem(USERNAME, this.remember ? user.username : "");
        storage.setItem(PASSWORD, this.remember ? user.password : "");
      }
    }
  };
</script>

<style scoped>
  .login-box {
    width: 420px;
    padding: 20px 8px 20px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .3);
  }

  .title {
    text-align: center;
    margin: 0 0 40px;
  }

  .errors {
    text-align: center;
    color: red;
    min-height: 1em;
    line-height: 1em;
    font-size: 14px;
    padding-bottom: 20px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
</style>
